<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/css/style.css" rel="stylesheet"/>
    <title>宠物资讯</title>
</head>

<body>
<a name="toparea"></a>
<div class="con">
    <%@ include file="layout/head.jsp" %>
    <div class="clear"></div>
    <div class="banner">
        <img src="image/banner.jpg"/>
    </div>
    <div class="clear"></div>
    <div class="main">
        <hr/>
        <a href="javascript:saveRecord('','');">添加资讯</a>
        <div class="search-box">
            <input value="${param.title}" class="search_input" placeholder="请输入资讯标题..." type="search">
            <a href="javascript:search();" class="search_a"><svg t="1600481293426" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1869" width="20" height="20"><path d="M463.04 780.16a323.52 323.52 0 1 1 228.8-96 320 320 0 0 1-228.8 96z m0-583.04a259.84 259.84 0 1 0 183.68 76.16 259.84 259.84 0 0 0-183.68-76.16z" p-id="1870" fill="#5A5D5A"></path><path d="M875.52 901.12a32 32 0 0 1-22.72-9.28l-206.08-206.4A32 32 0 0 1 691.84 640l206.08 206.08a32 32 0 0 1 0 45.44 32 32 0 0 1-22.4 9.6z" p-id="1871" fill="#5A5D5A"></path></svg></a>
        </div>
        <c:forEach  var="record" items="${data.records}">
        <div class="saishi">
            <div style="float: right">
                <a href="javascript:saveRecord('${record.title}','${record.content}',${record.id});">修改</a>
                <a href="javascript:deleteRecord(${record.id});">删除</a>
            </div>
            <h4>${record.title}</h4>
            <p>
                ${fn:substring(record.content, 0, 200)}......<a href="javascript:;" class="view-more" title="${record.title}" content="${record.content}">查看更多</a>
                <br/>
            </p>
            <div style="color: #8D8D8D">最后修改时间：<fmt:formatDate value="${record.updateTime}" pattern="yyyy-MM-dd HH:mm:ss"/></div>
            <div style="clear:left; height:1px;"></div>
        </div>
        </c:forEach>
        <div style="clear:left; height:10px;"></div>
        <c:if test="${data.current > 1}"><a href="javascript:jump(${data.current-1});">上一页</a></c:if>
        <c:if test="${data.current < data.getPages()}"><a style="margin-left: 20px;" href="javascript:jump(${data.current+1});">下一页</a></c:if>
        <%@ include file="layout/album.jsp"%>
    </div>
    <%@ include file="layout/foot.jsp"%>
</div>
<%@ include file="layout/top.jsp"%>
<script src="/js/jquery.min.js"></script>
<script src="/js/layer/layer.js"></script>
<script>
    $(function () {
        //弹出一个页面层
        $('.view-more').on('click', function(){
            let content = $(this).attr('content')
            let title = $(this).attr('title')
            layer.open({
                type: 1,
                area: ['900px', '900px'],
                shadeClose: true, //点击遮罩关闭
                title: title,
                content: '<p class="content">'+content+'</p>'
            });
        });
    })

    function deleteRecord(id) {
        layer.confirm('确定删除数据？', {icon: 3, title:'提示'}, function(index){
            $.post('<%=request.getContextPath()%>/consult/delete/'+id,function (resp) {
                console.log(resp)
                if (resp.result === true) {
                    layer.msg('删除成功',{ shift: -1, time: 1000 },function () {
                        location.reload()
                    });
                }else {
                    layer.msg('删除失败')
                }
            })
            layer.close(index);
        });
    }

    function saveRecord(title,content,id) {
        let form = `
                      <form id="save-form">
                        <div class="form-item">
                            <label for="consult-title">标题：</label>
                            <input value="`+title+`" type="text" id="consult-title" class="form_input">
                        </div>
                        <div class="form-item">
                            <label for="consult-content">内容：</label>
                            <textarea id="consult-content" class="form_input form_textarea">`+content+`</textarea>
                        </div>
                      </form>
                    `;
        let tip = id ? '修改':'新增'
        layer.confirm(form, {
            area: ['750px', '900px'],
            title:tip,
        }, function(index){
            let consultTitle = $('#consult-title').val()
            let consultContent = $('#consult-content').val()
            let data = {
                title: consultTitle,
                content: consultContent
            }
            if (id) {
                data.id = id
            }
            console.log(123,data)
            $.post('<%=request.getContextPath()%>/consult/save/',data,function (resp) {
                if (resp.result === true) {
                    layer.msg('保存成功',{ shift: -1, time: 1000 },function () {
                        location.reload()
                    });
                }else {
                    layer.msg('保存失败')
                }
            })
            layer.close(index);
        });
    }

    function search() {
        let title = $('.search_input').val().trim()
        if (title) {
            location.href = '/consult?title='+title
        }else {
            location.href = '/consult'
        }
    }

    function jump(page) {
        let title = getQuery('title')
        if (title) {
            location.href = '/consult?current='+page+'&title='+title
        }else {
            location.href = '/consult?current='+page
        }
    }

    function getQuery(name) {
        let query = window.location.search.substring(1);
        let vars = query.split("&");
        for (let i=0;i<vars.length;i++) {
            let pair = vars[i].split("=");
            if(pair[0] == name){return pair[1];}
        }
        return null;
    }

</script>
</body>
</html>
